<template>
  <div class="container">
    <div class="bgImg">background</div>
    <div class="hero">hero</div>
    <div class="title">title</div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.container {
  width: 200px;
  height: 300px;
  position: relative;
  .bgImg,
  .hero,
  .title {
    width: 100%;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
  }
  .bgImg {
    background-color: #eccc68;
    border-radius: 20px;
    z-index: 1;
  }
  &:hover .bgImg {
    box-shadow: 0px 35px 35px -8px rgba(0, 0, 0, 0.7);
    transform: perspective(500px) rotateX(30deg);
  }
  .hero {
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: #ff7f50;
    border-radius: 20px;
  }
  &:hover .hero {
    opacity: 1;
    transform: perspective(500px) translate3d(0, -50px, 50px);
  }
  .title {
    z-index: 3;
    bottom: 0;
    top: unset;
    left: 0;
    display: flex;
    align-items: end;
    width: 100%;
    height: 20px;
  }
  &:hover .title {
    transform: perspective(500px) translate3d(0, -50px, 50px);
  }
}
</style>
